<template>
    <view class="pub_page pub_page_bg pub_mine_send pub_wallet_switch pub_header_padding">
        <pub-head headerName="wallet_switch" :headerConfig="headerConfig"></pub-head>
        <pub-dialog v-show="dialogShow" dialogName="wallet_switch" :dialogConfig="dialogConfig"
            @dialogBack="dialogBack"></pub-dialog>
        <z-paging ref="Zpaging" class="pub_page_scroll page_box" v-model="list" @query="getList"
            :refresher-enabled="false" :fixed="false">
            <div class="input_div">
                <div class="title">兑换数量</div>
                <div class="inputs">
                    <div class="input">
                        <input type="text" placeholder="请输入" v-model="giveInfo.num">
                    </div>
                </div>
                <div class="msg">当前承兑汇票：{{ userInfo.acceptanceBill || 0 }}，手续费：{{giveProNum}}</div>
            </div>
            <div class="input_div">
                <div class="title">二级密码</div>
                <div class="inputs">
                    <div class="input">
                        <input type="password" placeholder="请输入" v-model="giveInfo.payPassword" maxlength="6">
                    </div>
                </div>
                <br>
                <br>
                <div class="pub_btn" @click="toDeal('to_give')">确定兑换</div>
            </div>

            <br>
            <br>
            <!-- <div class="msg_div">
                <div class="p_1">兑换须知</div>
                <br>
                <div class="p_2">1. 11111</div>
            </div>
            <br>
            <br> -->
            <!-- <br>
            <br>
            <div class="lis_div">
                <div class="title">兑换记录</div>
                <div class="li" v-for="(li, key) in list" :key="key">
                    <div class="p_1">兑换时间</div>
                    <div class="p_2">{{ li.createTime }}</div>
                    <div class="p_3">{{ li.finishNum }}</div>
                </div>
            </div> -->
        </z-paging>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '汇票兑换旺票',//标题栏内容
                left_type: 3,
                title_color: '#000',
                left_content: 'dark',
                header_color: '#fff'
            },
            dialogShow: false,
            dialogType: '',
            dialogConfig: {
                title: '提示',//标题栏内容
                content: ''
            },

            userInfo: '',
            givePro: 0,
            giveProNum: 0,
            // 转赠相关数据
            giveInfo: {
                num: '',
                payPassword: ''
            },
            list: []
        };
    },
    watch: {
        'giveInfo.num': {
            handler() {
                this.giveInfo.num = this.giveInfo.num.replace(/^(0+)|[^\d]+/g, '');
                this.giveProNum = Math.round(this.giveInfo.num * this.givePro * 100) / 100;
            },
            immediate: true,
            deep: true
        },
    },
    onLoad() {
        this.getPageInfo();
        this.getConfig();
        // setTimeout(() => {
        //     this.$comFun.openLoading();
        //     this.$refs.Zpaging.reload()
        // }, 400);
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    methods: {
        dialogBack(data) {
            // console.log(data);
            this.dialogShow = false;
            if (data.name == 'wallet_switch' && data.key == 1) {
                this.toDeal(this.dialogType)
            }
        },
        async getPageInfo() {
            if (this.userInfo == '') {
                this.$comFun.openLoading();
            }
            const res = await this.$request.get('user/userInfo', {});
            // console.log(res);
            if (this.userInfo == '') {
                this.$comFun.closeLoading();
            }
            // console.log(res);
            if (res.code == 200) {
                this.userInfo = res.result;
            }
        },
        async getConfig() {
            let configRes = await getApp().getConfigList();
            // console.log(configRes);
            this.givePro = configRes.billEServicePro;
        },
        async getList(pageNo, pageSize) {
            // const res = await this.$request.get('user/getExchangeToCoinLog', {
            //     pageNo: pageNo,
            //     pageSize: pageSize,
            // });
            // this.$comFun.closeLoading();
            // // console.log(res);
            // if (res.code == 200) {
            //     this.$refs.Zpaging.complete(res.result.records);
            // } else {
            //     this.$refs.Zpaging.complete(false);
            // }
        },
        async toDeal(type, data_1) {
            switch (type) {
                case 'to_give':
                    if (this.giveInfo.num == '' || !this.$comFun.ValidateNum(this.giveInfo.num)) {
                        this.$comFun.toast('请先填写正确的数量');
                        return;
                    }
                    if (!this.giveInfo.payPassword) {
                        this.$comFun.toast('请先填写二级密码');
                        return;
                    }
                    this.dialogType = 'sure_give';
                    this.dialogConfig = {
                        title: '提示',//标题栏内容
                        content: '是否确定兑换？'
                    }
                    this.dialogShow = true;
                    break;
                case 'sure_give':
                    this.$comFun.openLoading();
                    const res_2 = await this.$request.post('user/billExchangeToTicket', {
                        ...this.giveInfo,
                    });
                    // console.log(res_2);
                    this.$comFun.closeLoading();
                    if (res_2.code == 200) {
                        this.giveInfo.num = '';
                        this.giveInfo.payPassword = '';
                        this.$comFun.toast('兑换成功');
                        this.getPageInfo();
                        // setTimeout(() => {
                        //     this.$refs.Zpaging.reload();
                        // }, 1000)
                    } else {
                        this.$comFun.toast(res_2.message);
                    }
                    break;
                default:
                    break;
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/mine.scss";
</style>
